<template>
  <div class="dashboard-editor-container">
        <div class="container-left">
            <panel-group :topData='topData' />
          <el-row style="background:#fff;margin-bottom:32px;">
              <div class="chart-wrapper my-app">
                <div slot="header" class="clearfix">
                  <span class="title">我的应用</span>
                  <div class="wrapper-main">
                    <div class="quick-entry-main">
                        <div class="main-item" v-for="(img,index) in imgData" :key="index" @click="goToApp(img.path)">
                          <img :src="img.src" :title="img.title" :alt="img.title">
                          <p>{{img.title}}</p>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
          </el-row>
          <el-row style="background:#fff;margin-bottom:32px;">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                  <span class="title">人数统计</span>
                </div>
                <line-chart v-if="Object.keys(middleData).length" :chartData="middleData" :lineLegendData='lineLegendData'></line-chart>
              </div>
          </el-row>

          <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                <span class="title">性别统计</span>
              </div>
              <pie-chart v-if="Object.keys(leftBottomData).length" :type='1'  :pieLegendData='lineLegendData' :leftBottomData='leftBottomData' />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
              <div class="chart-wrapper">
                <div slot="header" class="clearfix">
                <span class="title">设备统计</span>
                </div>
                <pie-chart v-if="Object.keys(rightBottomData).length" :type='2'  :pieLegendData='lineLegendData' :leftBottomData='rightBottomData' />
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="container-right">
            <div class="right-top-calendar">
              <div class="calendar-title">
                <span class="title">工作日历</span>
                <el-button type="primary" size="small" @click="holidaySetting">节假日设置</el-button>
              </div>
              <el-calendar v-model="value">
                <template slot="dateCell " slot-scope="{ data }">
                <div :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split("-")[2] }}
                </div>
                </template>
              </el-calendar>
            </div>
            <div class="right-bott-quick-entry">
              <div class="quick-entry-title">
                <span class="title">通知公告</span>
                <span class="see-more" @click="seeMore()">查看更多</span>
              </div>
              <div class="quick-entry-main">
                  <div class="main-item" v-for="(item,index) in noticeData" :key="index">
                    <span :class="[item.type==0?'noticeClass1':'noticeClass2']">{{item.type==0?'通知':'提醒'}}</span>
                    <div class="item-right">{{item.title}}</div>
                  </div>
              </div>
            </div>
        </div>
        <el-dialog  :close-on-click-modal="false" title="节假日设置" :visible.sync="open" width="500px" append-to-body>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="节假日类型:" prop="holidayType">
              <el-select v-model="form.holidayType" placeholder="请选择节假日类型" @change="selectHoliday()">
                <el-option
                  v-for="item in holidayTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期:" prop="value1">
              <el-date-picker
              :disabled="dateDisabled"
                v-model="form.value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import LineChart from '../components/Chart/LineChart.vue'
import { getChart} from "@/api/sys/chart";
import PanelGroup from './dashboard/PanelGroup'
import PieChart from '@/components/Chart/PieChart.vue'
// import BarChart from '@/components/Charts/BarChart.vue'
import TableChart from '@/components/Charts/TableChart.vue'
import { getIndexData,getInformList} from "@/api/base/index"

export default {
  name: 'Index',
  components: {
    PanelGroup,
    TableChart,
    PieChart,
    // BarChart,
    LineChart,
  },
  data() {
    return {
      role: 'teacher',
      studentChart:null,
      studentParam:null,
      student2Chart:null,
      student2Param:null,
      teacherChart:null,
      teacherParam:null,
      schedulingChart:null,
      schedulingParam:null,
      value: new Date(),
      imgData: [
        { title: '教师管理', src: require('@/assets/image/permiss-icon.png'),path:'/baseSystem/jzhxxgl/teacher' },
        { title: '学生管理', src: require('@/assets/image/setting-icon.png'),path:'/baseSystem/yrxxgl/zystudent' },
        { title: '晨检总览', src: require('@/assets/image/holiday-icon.png'),path:'/studentcj/checkcj' },
        // { title: '请假记录', src: require('@/assets/image/data-icon.png'),path:'/illcontrol/childrenleave/leaverecord' },
        { title: '卫生消杀管理', src: require('@/assets/image/collect-icon.png'),path:'/gradenSystem/healthgl/xsgfgl' },
        { title: '周工作计划', src: require('@/assets/image/statistic-icon.png'),path:'/gradenSystem/weeklyplan' },
      ],
      noticeData:[],
      query: {
        pageNum: 1,
        pageSize: 10,
        where: null
      },
      // 表单参数
      chart: {},
      numberChart:null,
      numberquery:null,
      topData:{},
      middleData:{},
      leftBottomData:{},
      rightBottomData:{},
      lineLegendData:['男生','女生'],
      leftBottomLegendData:['手环','睡眠带','饮水机','晨检机器人','身高体重仪'],
      // 是否显示弹出层
      open: false,
      dateDisabled: true,
      form:{
      },
      // 节日类型
      holidayTypeOptions:[{
          value: '1',
          label: '元旦'
        }, {
          value: '2',
          label: '春节'
        }, {
          value: '3',
          label: '清明节'
        }, {
          value: '4',
          label: '劳动节'
        }, {
          value: '5',
          label: '端午节'
        },
        {
          value: '6',
          label: '中秋节'
        }, {
          value: '7',
          label: '国庆节'
        }],
    }
  },
  created() {
    this.dateDisabled = true
    this.getIndexData()
    this.getInformList()
  },
  methods: {
    goToApp(path){
      this.$router.push(path)
    },
    seeMore(){
      this.$router.push('/ynotice')
    },
    // 获取通知公告
    async getInformList(){
      const res = await getInformList()
      if(res.code == 200){
        if(res.rows.length>10){
          this.noticeData = res.rows.slice(0, 10)
        } else {
          this.noticeData = res.rows
        }

      }
    },
    async getIndexData(){
       const res = await getIndexData()
       if(res.code == 200){
          this.topData = res.data.top
          let months = res.data.middle.map((item)=> {
            return item.month;
          });
          let boys = res.data.middle.map((item)=> {
            return item.boy;
          });
          let girls = res.data.middle.map((item)=> {
            return item.girl;
          });
          this.middleData  = {
            "months":months,
            "boys" :boys,
            "girls":girls,
          }
          this.leftBottomData = res.data.leftBottom
          this.rightBottomData = res.data.rightBottom
       }
    },
    // 节假日设置
    holidaySetting(){
      this.open = true
    },
    selectHoliday(){
      if(this.form.holidayType){
        this.dateDisabled = false
      }
    },
    // 确认
    submitForm(){
      this.open = false
      this.form = {}
      this.dateDisabled = true
    },
    // 取消
    cancel(){
      this.open = false
      this.form = {}
      this.dateDisabled = true
    }

  }
}
</script>

<style lang="scss" scoped>
.noticeClass1{
  background: #E8F3FF;
  color: #3A72FF;
}
.noticeClass2{
  background: #FFE8E8;
  color: #F94F4F;
}
.noticeClass3{
  background: #E8FFFB;
  color: #16C9C8;
}
.noticeClass4{
  background: #FFF3E8;
  color: #F9844F;
}
.dashboard-editor-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title{
    font-size: 16px;
    font-weight: 700;
  }
  .chart-wrapper {
    box-sizing: border-box;
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    // height: 240px;
  }
  .el-row{
    .my-app{
      height: 160px;
      .quick-entry-main{
        display: flex;
        flex-wrap: wrap;
        .main-item{
          margin: 28px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
        }
        img{
          width: 56px;
          height: 56px;
        }
      }
    }
  }

  .container-left{
    width: 80%;
    margin-right: 20px;
  }
  .container-right{
    width: 20%;
    // width: 280px;
    .right-top-calendar{
      background-color: #fff;
      padding: 20px 20px 20px 20px;
      .calendar-title{
        display: flex;
        justify-content: space-between;
      }
      ::v-deep .el-button-group{
        display: none;
      }
    ::v-deep .el-calendar {
    font-size: 14px;
    .next {
      border: none;
    }
    td {
      border: none;
    }
    .el-calendar-day {
      height: 35px !important;
      text-align: center;
      border: none;
    }
    .el-calendar__header {
      justify-content: space-between;
    }
    .is-selected {
      background-color: #1d8dd8;
      color: #fff;
    }
  }
    }
    .right-bott-quick-entry{
      padding: 20px;
      width: 100%;
      margin-top: 20px;
      background-color: #fff;
      .quick-entry-title{
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin-bottom: 24px;
        .see-more{
          color: #0471EF;
          cursor: pointer;
        }
      }
      .quick-entry-main{
        .main-item{
          display: flex;
          align-items: center;
          margin: 8px 0;
          span{
            display: inline-block;
            width: 44px;
            height: 28px;
            font-size: 12px;
            margin-right: 8px;
            border-radius: 2px;
            line-height: 28px;
            text-align: center;
          }
          .item-right{
            color: #666666;
            font-size: 14px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
